<template>
  <section class="setting-pwd">
    <div class="inner">
        <Form :model="formItem" label-position="right" :label-width="100">
            <FormItem label="当前头像：">
                <img class="avatar" :src="ImgUrl" alt="avatar">
            </FormItem>
            <FormItem label="替换头像：">
                <Input v-model="formItem.avatar" style="width: 300px"></Input>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <Upload
                        name="file"
                        action="//www.hfbb.com/api/common/upload"
                        :before-upload="handleUpload"
                        :on-success="success"
                        style="display: inline-block"
                >
                <Button icon="ios-cloud-upload-outline" type="primary" >浏览</Button>
                </Upload>
                <p class="tip">建议使用那个正方形的图片，支持JPG,PNG,GIF格式，100KB以内。</p>
            </FormItem>
        </Form>
        <div style="padding-left: 100px">
            <Button type="primary" size="large" style="width: 206px" @click="subimt" >保存</Button>
        </div>
    </div>
  </section>
</template>

<script>
import MsgItem from '@/components/ListItem/MsgItem'
export default {
  name: 'SettingPwd',
  components: {
      MsgItem
  },
   data () {
      return {
          formItem: {},
          ImgUrl:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1245094042,1192779942&fm=26&gp=0.jpg'
      }
   },
    created () {
    },
    methods: {
        success ( res) {
           console.log(res.data.url)
           this.ImgUrl = 'http://192.168.0.137/project/hfbb/public'+res.data.url
            this.formItem.avatar = res.data.url
      },

        handleUpload (file) {
            this.file = file;
            console.log(this.file)
        },
        subimt () {
            let _this =this
            console.log(this.formItem.avatar)
            this.$post('/api/user/userInfo',
                {
                    token:_this.$token,
                    avatar:this.ImgUrl,
                },function (res) {
                    console.log(res)
                },
                function (err) {

                }
            )

        }
    }
}
</script>

<style lang="less" >
  @import "../../../style/style.less";
  .setting-pwd {
    border: 1px solid @border-color;
    border-top: 3px solid @theme-color-dark;
    padding: 15px;
      .inner{
          padding: 20px 0;
      }
      .avatar {
          width: 100px;
          height: 100px;
          border-radius: 50%;
      }
      .tip {
          font-size: 14px;
          color: #999;
      }
      .ivu-upload-list li{
          display: none;
      }
  }
</style>
